<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lime Unit Tests - lime.style</title>
<script src="../../closure/closure/goog/base.js"></script>
<script>
  goog.require('goog.testing.MockClock');
  goog.require('goog.testing.jsunit');
  goog.require('lime.style');
  goog.require('lime.animation.Easing');
</script>

<style>
    #stage {
        width:100px;
        height: 100px;
        position: absolute;
        visible:hidden;
    }
</style>
</head>
<body>
    
<div id="stage">
</div>    
<script>


function shouldRunTests() {
  return true;
}

function setUpPage(){
}

function tearDownPage(){
}

function tearDown() {
  //  stage.innerHTML='';
}
function setUp(){
    stage = document.getElementById('stage');
}


function testCommonProperties() {
    
    assertEquals('Common property position',lime.style.getCSSproperty('position'),'position');
    assertEquals('Common property left',lime.style.getCSSproperty('left'),'left');
    
  
  
}

function testBorderRadius(){
    
    var stylename = lime.style.getCSSproperty('BorderRadius'),
        stylenametl = lime.style.getCSSproperty('BorderTopLeftRadius');
        
    var assertValid = function(name){
        var value = stage.style[stylenametl];
        if(!value || !value.length) value = stage.style[stylename];
        assertNonEmptyString('Border radius has been set ('+name+')',value);
    };
    var clear = function(){
        stage.style[stylename] = '';
    }
    
    lime.style.setBorderRadius(stage,0);
    assertValid('empty');
    clear();
    
    lime.style.setBorderRadius(stage,10);
    assertValid('single val');
    clear();
    
    lime.style.setBorderRadius(stage,10,15);
    assertValid('two val');
    clear();
    
    lime.style.setBorderRadius(stage,[10,15]);
    assertValid('single array');
    clear();
    
    lime.style.setBorderRadius(stage,[10,15],[9,20],true);
    assertValid('percentage');
    clear();
    
    
}

function testTransformOrigin(){
    
    var stylename = lime.style.getCSSproperty('TransformOrigin');
    
    lime.style.setTransformOrigin(stage,10,15);
    assertEquals('Setting origin to fixed values',stage.style[stylename],'10px 15px');
    
    lime.style.setTransformOrigin(stage,50,75,true);
    assertEquals('Setting origin to fixed values',stage.style[stylename],'50% 75%');
    
}

function testTransform(){
    var stylename = lime.style.getCSSproperty('Transform');
    
    var getMatrix = function(){
        var str = goog.style.getComputedStyle(stage,stylename);
        str = str.replace(/px|\)|matrix\(/g,'');
        return str;
    }
    
    var tf = new lime.style.Transform();
    lime.style.setTransform(stage,tf);
    assertEquals('Empty matrix','none',getMatrix());
    
    tf.translate(10,10).scale(.1,.1).scale(10,10).translate(-10,-10);
    lime.style.setTransform(stage,tf);
    assertEquals('Identity matrix','1, 0, 0, 1, 0, 0',getMatrix());
    
    tf = new lime.style.Transform(Math.random()).translate(100,-50);
    lime.style.setTransform(stage,tf);
    assertEquals('Translated matrix','1, 0, 0, 1, 100, -50',getMatrix());
    
    lime.style.setTransform(stage,tf.scale(1.5,1.5).setPrecision(Math.random()));
    assertEquals('Scaled matrix','1.5, 0, 0, 1.5, 100, -50',getMatrix());
    
    lime.style.setTransform(stage,tf.rotate(2));
    assertEquals('Rotated matrix','1.49909, 0.0523492, -0.0523492, 1.49909, 100, -50',getMatrix());
    
    
}

function testTransitions(){
    
    if(!lime.style.isTransitionsSupported) return;
    
    var stylename = lime.style.getCSSproperty('Transition');
    
    var getValue = function(){
         return stage.style[stylename];
    }
    
    assertEquals('Empty transition: ','',getValue());
    
    lime.style.setTransition(stage,'left',1.5,lime.animation.Easing.LINEAR);
    
    assertEquals('Single transition: ','left 1.5s cubic-bezier(0.21, 0.2, 0.51, 0.58)',getValue());
    
    lime.style.clearTransition(stage,'left');
    
    assertEquals('Empty transition: ','',getValue());
    
    
    lime.style.setTransition(stage,'left',2.5,lime.animation.Easing.LINEAR);
    lime.style.setTransition(stage,'top',.5,lime.animation.Easing.LINEAR);
    
    assertEquals('Two transitions: ','left 2.5s cubic-bezier(0.21, 0.2, 0.51, 0.58), top 0.5s cubic-bezier(0.21, 0.2, 0.51, 0.58)',getValue());
    
    
    lime.style.setTransition(stage,'top',1.9,lime.animation.Easing.LINEAR);
    
    assertEquals('Update transitions: ','left 2.5s cubic-bezier(0.21, 0.2, 0.51, 0.58), top 1.9s cubic-bezier(0.21, 0.2, 0.51, 0.58)',getValue());
    
    lime.style.clearTransition(stage,'left',lime.animation.Easing.LINEAR);
    
    assertEquals('Clear one transition: ','top 1.9s cubic-bezier(0.21, 0.2, 0.51, 0.58)',getValue());
    
    
}

function testSetSize(){
    
    lime.style.setSize(stage,200,100);
    assertObjectEquals('First setSize',new goog.math.Size(200,100),goog.style.getSize(stage));
    
    lime.style.setSize(stage,98,150);
    assertObjectEquals('Second setSize',new goog.math.Size(98,150),goog.style.getSize(stage));
    
    
}

</script>
</body>
</html>
